<template>
  <div class="menu-main">
    <el-container class="menu-main-container">
      <el-aside class="menu-main-sider" width="180px"><sidebarView class="sider" /></el-aside>
      <el-container>
        <el-header height="60px" class="menu-main-container-header"><headerView /></el-header>
        <el-main class="menu-main-container-content"><contentView /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import sidebarView from './sidebarView.vue'
import headerView from './headerView.vue'
import contentView from './contentView.vue'
</script>
<style lang="scss" scoped>
.menu-main {
  width: 100%;
  height: 100%;
  display: flex;
  background: #ecf0f1;
  &-container {
    &-header {
      background: #545c64;
    }
    &-content {
      margin-top: 16px;
      background: #fff;
    }
  }
  &-sider {
    background: #545c64;
    overflow: auto;
    margin-right: 16px;
  }

  .main {
    width: 100%;
    padding-bottom: 16px;
    .content {
      width: calc(100% - 16px);
      height: calc(100% - 60px - 16px);
      background: #fff;
      margin: 16px 0;
      overflow: auto;
    }
  }
}
</style>
